<template>
	<view  class="img-box">
		<image :src="bgArr[0]"  class="bg" mode="aspectFill" />
	</view>
</template>

<script setup>
	import {defineProps} from 'vue'
	const prop = defineProps({
		bgArr:{
			type:Array,
			default:()=>{
				return []
			}
		}
	})
	
</script>

<style lang="scss">
	.img-box{
		height: 100vh;
		width: 100%;
		position: relative;
		.bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
	}
	.img-box::before{
		content: ""; /* 必须有content属性 */
		  position: absolute; /* 绝对定位 */
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: linear-gradient(to bottom,rgba(#752e98, 0.5), rgba(#290141, 1)); /* 渐变背景 */
		  z-index: 1; /* 设置层叠顺序 */
	}

</style>